import { View, Text } from "@tarojs/components";

import "./index.scss";
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "@/store";
import Taro from "@tarojs/taro";

// @connect(({flightIndex}) => ({
//   ...flightIndex
// }))

interface IProps {
  cityList: any[]; // 每个字母所包含的城市列表
  label: string; // 字母
}

export const CityItem: React.FC<IProps> = (props) => {
  const { cityList, label } = props;

  const flightState = useSelector((state: RootState) => state.flightIndex);
  // console.log("flightState", flightState);

  const dispatch = useDispatch();

  const onCityClick = (cityInfo) => {
    const { cityType } = flightState;
    // const { cityType } = this.props;
    console.log("cityInfo", cityInfo);

    const { city_id, city_name, airport_name } = cityInfo;

    dispatch({
      type: "flightIndex/updateState",
      payload:
        cityType === "depart"
          ? {
              dptCityId: city_id,
              dptAirportName: airport_name,
              dptCityName: city_name,
            }
          : {
              arrCityId: city_id,
              arrAirportName: airport_name,
              arrCityName: city_name,
            },
    });

    Taro.navigateBack();
  };

  // cityList:每个字母所包含的城市列表
  // label：字母

  return (
    <View className="list-item" id={label}>
      <Text className="label">{label}</Text>
      {cityList?.map((item) => {
        return (
          <View
            key={item.id}
            className="name"
            onClick={() => onCityClick(item)}
          >
            {`${item.city_name}（${item.airport_name}）`}
          </View>
        );
      })}
    </View>
  );
};
